import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

class CuoertinoSegmentedControl extends StatefulWidget {
  const CuoertinoSegmentedControl({Key? key}) : super(key: key);

  @override
  State<CuoertinoSegmentedControl> createState() => _CuoertinoSegmentedControlState();
}

class _CuoertinoSegmentedControlState extends State<CuoertinoSegmentedControl> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("分段控件"),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: double.infinity,
        child: Column(
          children: [
            buildSegment(),
            buildSegmentI()
          ],
        ),
      ),
    );
    
  }
  int _currentIndex =0;
  buildSegment(){
    return Container(
      margin: EdgeInsets.only(top: 20),
      width: 300,
      child: CupertinoSegmentedControl(
        // 子标签
        children: <int,Widget>{
          0:Text("全部"),
          1:Text("收入"),
          2:Text("支出"),
        }, 
        // 当前选中的索引
        groupValue: _currentIndex,
        // 选中背景
        selectedColor: Colors.red,
        // 未被选中颜色
        unselectedColor: Colors.blue,
        // 边框的颜色
        borderColor: Colors.red,
        // 按下的颜色
        pressedColor: Colors.blue.withOpacity(0.4),
        onValueChanged: (int index){
          print("当前选中 $index");
          setState(() {
            _currentIndex = index;
          });
        }),
    );

  }

  buildSegmentI(){
    return Container(
      margin: EdgeInsets.only(top: 20),
      width: 300,
      child: CupertinoSlidingSegmentedControl(
        // 子标签
        children: <int,Widget>{
          0:Text("全部"),
          1:Text("收入"),
          2:Text("支出"),
        }, 
        // 当前选中的索引
        groupValue: _currentIndex,
        // 选中背景
        onValueChanged: (int? index){
          print("当前选中 $index");
          setState(() {
            _currentIndex = index!;
          });
        }),
    );

  }
}